import React, {memo, useCallback, useRef, useState} from 'react';
let obj = null;

/**
 * useRef
 * 1.可以存储任何类型的数据；
 * 2.存储的数据，在组件的整个生命周期内都有效，而且只在生命周期内有效，组件被销毁后，存储的数据也就被销毁了；
 * 3.内容被修改时，不会引起组件的重新渲染；
 * 4.内容被修改，是会立即生效的；
 * 5.内容的读写操作，都是在 current 属性上操作的，没有额外的 get, set 等方法；
 */
const App = memo(() => {
  const [counter, setCounter] = useState(0);

  // 在当前组件的整个生命周期中，无论重新渲染多少次, 当前 ref 对象都是同一个
  const titleRef = useRef();
  console.log(obj === titleRef);
  obj = titleRef;

  // 内部通过 memoizedState, 仅修改 ref 中的值, 不修改对象本身
  const countRef = useRef();
  countRef.current = counter;
  const increment = useCallback(() => {
     setCounter(countRef.current + 1);
  }, [])

  return (
      <div>
        <h2>Hello World</h2>
        <h2>当前计数: {counter}</h2>
        <button onClick={() => setCounter(counter + 1)}>+1</button>
        <button onClick={increment}>+1</button>
      </div>
  );
});

// function foo() {
//   const info = {
//
//   }
// }
// //foo每一次调用都会创建一个新的info局部对象
// foo();
// foo();

export default App;